<template>
  <div class="app-container">
    <div class="company-home">
      <!-- 头部横幅 -->
      <div class="banner">
        <div class="banner-content">
          <h1>百善家政</h1>
          <p>您的家，我们的责任</p>
          <el-button type="primary" size="large" @click="reserveService">立即预约</el-button>
        </div>
      </div>

      <!-- 核心服务 -->
      <div class="section">
        <div class="section-header">
          <h2>核心服务</h2>
          <p>为您提供全方位的家政服务解决方案</p>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8" v-for="(service, index) in coreServices" :key="index">
            <el-card class="service-card" shadow="hover">
              <div class="service-icon">
                <i :class="service.icon"></i>
              </div>
              <h3>{{ service.title }}</h3>
              <p>{{ service.description }}</p>
              <el-button type="text" @click="viewServiceDetail(service)">了解更多 <i class="el-icon-arrow-right"></i></el-button>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 为什么选择我们 -->
      <div class="section why-choose-us">
        <div class="section-header">
          <h2>为什么选择我们</h2>
          <p>专业品质，值得信赖</p>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6" v-for="(reason, index) in whyChooseUs" :key="index">
            <div class="reason-item">
              <div class="reason-icon">
                <i :class="reason.icon"></i>
              </div>
              <h3>{{ reason.title }}</h3>
              <p>{{ reason.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 服务流程 -->
      <div class="section process-section">
        <div class="section-header">
          <h2>服务流程</h2>
          <p>简单便捷的服务体验</p>
        </div>
        <el-steps :active="4" finish-status="success" align-center>
          <el-step title="在线预约" description="选择您需要的服务类型和时间">
            <i slot="icon" class="el-icon-message"></i>
          </el-step>
          <el-step title="客服确认" description="客服将与您联系确认服务细节">
            <i slot="icon" class="el-icon-phone-outline"></i>
          </el-step>
          <el-step title="专业服务" description="专业人员上门提供服务">
            <i slot="icon" class="el-icon-s-custom"></i>
          </el-step>
          <el-step title="服务评价" description="对服务进行评价和反馈">
            <i slot="icon" class="el-icon-star-on"></i>
          </el-step>
        </el-steps>
      </div>

      <!-- 客户评价 -->
      <div class="section testimonials">
        <div class="section-header">
          <h2>客户评价</h2>
          <p>真实客户的真实反馈</p>
        </div>
        <el-carousel :interval="5000" type="card" height="280px">
          <el-carousel-item v-for="(testimonial, index) in testimonials" :key="index">
            <div class="testimonial-card">
              <div class="testimonial-content">
                <i class="el-icon-s-comment quote-icon"></i>
                <p>{{ testimonial.content }}</p>
                <div class="testimonial-author">
                  <div class="author-avatar">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <div class="author-info">
                    <h4>{{ testimonial.name }}</h4>
                    <p>{{ testimonial.title }}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 联系我们 -->
      <div class="section contact-us">
        <div class="section-header">
          <h2>联系我们</h2>
          <p>随时为您提供帮助</p>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <div class="contact-info">
              <div class="contact-item">
                <i class="el-icon-location"></i>
                <div>
                  <h4>公司地址</h4>
                  <p>贵州省贵阳市贵阳人文科技学院</p>
                </div>
              </div>
              <div class="contact-item">
                <i class="el-icon-phone"></i>
                <div>
                  <h4>联系电话</h4>
                  <p>400-123-4567</p>
                </div>
              </div>
              <div class="contact-item">
                <i class="el-icon-message"></i>
                <div>
                  <h4>电子邮箱</h4>
                  <p>contact@baishan-housekeeping.com</p>
                </div>
              </div>
              <div class="contact-item">
                <i class="el-icon-time"></i>
                <div>
                  <h4>工作时间</h4>
                  <p>周一至周日 8:00-20:00</p>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form ref="contactForm" :model="contactForm" label-position="top">
              <el-form-item label="您的姓名">
                <el-input v-model="contactForm.name" placeholder="请输入您的姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="contactForm.phone" placeholder="请输入您的联系电话"></el-input>
              </el-form-item>
              <el-form-item label="留言内容">
                <el-input type="textarea" v-model="contactForm.message" rows="4" placeholder="请输入您的留言内容"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitContactForm">提交留言</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CompanyHome",
  data() {
    return {
      coreServices: [
        {
          title: "日常保洁",
          icon: "el-icon-brush",
          description: "专业日常保洁服务，让您的家居环境始终保持整洁舒适。",
          id: "daily-cleaning"
        },
        {
          title: "专业月嫂",
          icon: "el-icon-female",
          description: "资深月嫂团队，为新妈妈和宝宝提供专业的月子护理服务。",
          id: "maternity-nurse"
        },
        {
          title: "老人陪护",
          icon: "el-icon-user",
          description: "为老年人提供细致、耐心的生活照料和情感陪伴服务。",
          id: "elderly-care"
        }
      ],
      whyChooseUs: [
        {
          title: "专业团队",
          icon: "el-icon-s-custom",
          description: "拥有经过严格筛选和专业培训的服务团队"
        },
        {
          title: "优质服务",
          icon: "el-icon-trophy",
          description: "标准化服务流程，确保每次服务的高质量"
        },
        {
          title: "价格透明",
          icon: "el-icon-money",
          description: "服务价格公开透明，无隐形消费"
        },
        {
          title: "保险保障",
          icon: "el-icon-umbrella",
          description: "所有服务均有保险保障，确保您的权益"
        }
      ],
      testimonials: [
        {
          content: "百善家政的阿姨非常专业，打扫得很干净，服务态度也很好，非常满意！",
          name: "张女士",
          title: "日常保洁客户"
        },
        {
          content: "感谢百善家政的月嫂，她不仅照顾了我的宝宝，还教了我很多育儿知识，真的很专业！",
          name: "李女士",
          title: "月嫂服务客户"
        },
        {
          content: "百善家政为我父亲提供的陪护服务非常贴心，让我在工作时也能安心。",
          name: "王先生",
          title: "老人陪护客户"
        }
      ],
      contactForm: {
        name: "",
        phone: "",
        message: ""
      }
    };
  },
  methods: {
    reserveService() {
      // 跳转到服务预约页面
      this.$router.push('/company/reservation');
    },
    viewServiceDetail(service) {
      // 查看服务详情
      this.$message.info(`查看${service.title}详情`);
    },
    submitContactForm() {
      // 提交联系表单
      this.$message.success("感谢您的留言，我们会尽快与您联系！");
      this.contactForm = {
        name: "",
        phone: "",
        message: ""
      };
    }
  }
};
</script>

<style scoped>
.company-home {
  color: #333;
}

.banner {
  height: 500px;
  background: url("https://via.placeholder.com/1920x500") center center no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}

.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: white;
  width: 100%;
  padding: 0 20px;
}

.banner-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
}

.banner-content p {
  font-size: 24px;
  margin-bottom: 30px;
}

.section {
  margin-bottom: 60px;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h2 {
  font-size: 32px;
  color: #1890ff;
  margin-bottom: 10px;
}

.section-header p {
  font-size: 16px;
  color: #666;
}

.service-card {
  height: 100%;
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 20px;
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-icon {
  font-size: 50px;
  color: #1890ff;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.why-choose-us {
  background-color: #f8f8f8;
  padding: 60px 0;
}

.reason-item {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
}

.reason-icon {
  font-size: 40px;
  color: #1890ff;
  margin-bottom: 15px;
}

.reason-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.process-section {
  padding: 60px 0;
}

.testimonials {
  background-color: #f8f8f8;
  padding: 60px 0;
}

.testimonial-card {
  background-color: white;
  border-radius: 8px;
  height: 100%;
  padding: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quote-icon {
  font-size: 30px;
  color: #1890ff;
  margin-bottom: 15px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-right: 15px;
}

.author-info h4 {
  margin: 0;
  font-size: 16px;
}

.author-info p {
  margin: 5px 0 0;
  color: #666;
}

.contact-info {
  margin-bottom: 30px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}

.contact-item i {
  font-size: 24px;
  color: #1890ff;
  margin-right: 15px;
  margin-top: 5px;
}

.contact-item h4 {
  margin: 0 0 5px;
  font-size: 16px;
}

.contact-item p {
  margin: 0;
  color: #666;
}

@media (max-width: 768px) {
  .banner {
    height: 300px;
  }

  .banner-content h1 {
    font-size: 36px;
  }

  .banner-content p {
    font-size: 18px;
  }

  .section-header h2 {
    font-size: 26px;
  }
}
</style>
